<template>
    <div class="aboutChild">
        <h1>------------------------------aboutChild------------------------------</h1>
        <div>子组件收到的值:{{ props.childData }}</div>
        <button @click="changeProp">子传父</button>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, defineExpose, ref } from 'vue';
const props = defineProps({
    childData: String
})

const emit = defineEmits<{
    (e: 'childChange', val: any): void
}>()

const exprotData = ref("子组件暴露出去的数据")

defineExpose({
    exprotData
})

function changeProp(): void {
    console.log(props)
    emit("childChange", "子传父改变值33333333333")
    // props.childData = "已修改传递子组件的值"
}
</script>

<style>
</style>